<template>
	<div class="uploader" v-loading="loading">
		<el-upload
			ref="upload2"
			class="upload-demo"
			drag
			:action="uploadActive"
			:data="uploadData"
			:auto-upload="true"
			accept=".pdf,.PDF"
			name="report"
			:before-upload="beforeUpload"
			:on-success="handleSuccess"
			:http-request="httpRequest"
			:show-file-list="false"
			multiple
		>
			<img class="icon" src="@img/upload-1.png" alt="" />
			<div class="el-upload__text">
				<p class="p-1">将报告拖到此处上传，可多选。</p>
				<p class="p-2">或者，您可以单击此处选择一个报告</p>
				<p class="p-3">点击上传</p>
			</div>
			<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
		</el-upload>
		<ul class="file-list">
			<li class="item" @click="clickItem(item)" :title="item.name" v-for="(item, i) in fileList" :key="i">
				<img src="@img/Pdf.png" alt="" />
				<p>{{ item.name || '无名称' }}</p>
				<button @click="delItem(item, i)">
					<i class="el-icon-close"></i>
				</button>
			</li>
		</ul>
	</div>
</template>

<script>
import { host } from '@/store/axiosConfig.js'; //导入 axios 配置
function fileToBase64(file) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = () => resolve(reader.result);
		reader.onerror = (error) => reject(error);
	});
}
export default {
	props: {
		value: {
			type: Array,
			default: () => {
				return [];
			}
		},
		title: {
			type: String,
			default: ''
		},
		tip: {
			type: String,
			default: ''
		},
		initData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'uploader',
	components: {},
	data() {
		return {
			fileList: this.value,
			dialogImageUrl: '',
			report_name: '',
			dialogVisible: false,
			loading: false
		};
	},
	watch: {
		value(val) {
			this.fileList = val;
		}
	},
	computed: {
		uploadActive() {
			return `${host}/api/check/device_report/upload`;
		},
		uploadData() {
			return {
				device_id: this.initData.id,
				check_id: this.check_id,
				report_name: this.report_name
			};
		}
	},
	mounted() {},

	methods: {
		delItem(item, i) {
			this.fileList.splice(i, 1);
		},
		clickItem(item) {
			if (item.url) {
				window.open(item.url);
			}
		},
		async httpRequest(param) {
			param.status = 'uploading'; //文件上传状态
			param.percentage = 0; //文件上传进度，这里设为0
			param.name = param.file.name; //文件名
			let file = param.file;
			// const base64 = await fileToBase64(file);
			this.loading = true;
			let file_name = '';
			if (file.name) file_name = file.name.replace('.pdf', '');
			let params = {
				file_name,
			};
			const formData = new FormData();
			formData.append('file_content', file);
			this.$uploadApi('check/device_report/upload',formData, params).then((res) => {
				this.loading = false;
				if (res.code == 200) {
					param.status = 'success'; //上传成功后将status属性改成success
					let data = res.data.data;
					this.fileList.push({
						// ...data,
						uid: file.uid,
						name: data.report_name,
						url: data.report_url
					});
					this.$emit('input', this.fileList);
				} else {
					param.status = 'failed';
					param.message = '上传失败';
				}
			});
		},
		// async httpRequest(param) {
		// 	param.status = 'uploading'; //文件上传状态
		// 	param.percentage = 0; //文件上传进度，这里设为0
		// 	param.name = param.file.name; //文件名
		// 	let file = param.file;
		// 	const base64 = await fileToBase64(file);
		// 	this.loading = true;
		// 	let report_name = '';
		// 	if (file.name) report_name = file.name.replace('.pdf', '');
		// 	let params = {
		// 		device_id: this.initData.id,
		// 		check_id: `${this.check_id}`,
		// 		report_name,
		// 		report: base64
		// 	};
		// 	this.$api('check/device_report/upload', params, 'post').then((res) => {
		// 		this.loading = false;
		// 		if (res.code == 200) {
		// 			param.status = 'success'; //上传成功后将status属性改成success
		// 			let data = res.data.data;
		// 			this.fileList.push({
		// 				// ...data,
		// 				uid: file.uid,
		// 				name: data.report_name,
		// 				url: data.report_url
		// 			});
		// 			this.$emit('input', this.fileList);
		// 		} else {
		// 			param.status = 'failed';
		// 			param.message = '上传失败';
		// 		}
		// 	});
		// },
		beforeUpload(file) {
			console.log(file, '------------beforeUpload');
			this.report_name = file.name;
		},
		handleSuccess(res, file, fileList) {
			console.log(res, file, fileList, '-----------res,file,fileList');
		},
		handleRemove(file, fileList) {
			console.log(file, fileList);
		}
	}
};
</script>

<style scoped lang="less">
.uploader {
	width: 100%;
	.file-list {
		display: flex;
		flex-direction: column;
		.item {
			display: flex;
			align-items: center;
			// margin-bottom: 10px;
			// .bor();
			padding: 5px 5px;
			margin-bottom: 2px;
			cursor: pointer;
			border-radius: 4px;
			transition: 0.2s all ease;
			&:hover {
				background: rgba(0, 0, 0, 0.05);
				p {
					color: @theme;
				}
			}
			img {
				width: 12px;
				height: 13px;
				margin-right: 8px;
			}
			p {
				flex: 1;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				font-style: normal;
				transition: 0.2s all ease;
				.line-1();
			}
			button {
				width: 30px;
				height: 100%;
				text-align: right;
				i {
					line-height: 1;
				}
			}
		}
	}
	/deep/.upload-demo {
		width: 100%;
		.el-upload {
			width: 100%;
			.el-upload-dragger {
				width: 100%;
			}
		}

		.icon {
			width: 27px;
			height: 31px;
			margin-top: 30px;
			margin-bottom: 12px;
		}
		.el-upload__text {
			.p-1 {
				font-weight: bold;
				font-size: 16px;
				color: #333333;
				line-height: 22px;
				text-align: center;
				font-style: normal;
			}
			.p-2 {
				margin-top: 7px;
				font-weight: bold;
				font-size: 12px;
				color: #999999;
				line-height: 17px;
				text-align: center;
				font-style: normal;
			}
			.p-3 {
				margin-top: 7px;
				font-weight: bold;
				font-size: 16px;
				color: #3f87ff;
				line-height: 22px;
				font-style: normal;
			}
		}
	}
}
</style>
